<template>
	<view class="mine-container">
		<!-- 用户信息区域 -->
		<view class="user-info" @click="toProfile" v-if="isLogin">
			<image class="bg" src="/static/img/minBf.png" style="width: 100%;height: 100%;" mode=""></image>
			<image class="avatar" :src="userInfo.avatar || avatar"></image>
			<view style="padding-left: 20px;text-align: left;padding-bottom: 10px;z-index: 88;">
				<view class="user-name">{{userInfo.nickname || ''}}</view>
				<image @click.stop="toOpenVip" v-if="myInfo?.pro==5" src="/static/img/hy.png" style="width: 220rpx;height: 43rpx;" mode=""></image>
			</view>
		</view>
		<view class="user-info" @click="toLogin" v-else>
			<image class="bg" src="/static/img/minBf.png" style="width: 100%;height: 100%;" mode=""></image>
			<image class="avatar" :src="avatar"></image>
			<view style="padding-left: 20px;text-align: left;padding-bottom: 10px;z-index: 88;">
				<view class="user-name">登录/注册</view>
			</view>
		</view>
		<view class="user-card">
			<image class="bg" src="/static/img/bg1.png"  mode=""></image>
			<view class="card" @click="toCourse">
				<image src="/static/img/list1.png" style="width: 90rpx;height: 90rpx;" mode=""></image>
				<text>买健身课</text>
			</view>
			<view class="card" @click="toTntegral">
				<image src="/static/img/list3.png" style="width: 90rpx;height: 90rpx;" mode=""></image>
				<text>积分</text>
			</view>
			<!-- <view class="card">
				<image src="/static/img/list4.png" style="width: 90rpx;height: 90rpx;" mode=""></image>
				<text>兑换劵</text>
			</view> -->
			<view class="card"  @click="handleFunction">
				<image src="/static/img/list2.png" style="width: 90rpx;height: 90rpx;" mode=""></image>
				<text>水吧</text>
			</view>
		</view>

		<!-- 会员提示区域 -->
		<view class="member-banner" @click="toVip" v-if="myInfo?.pro!=5">
			<image src="/static/img/kthy.png" style="width: 710rpx;height: 90rpx;" mode=""></image>
		</view>

		<!-- 工具区域 -->
		<view class="tools-section">
			<view class="section-title">消费</view>
			<view class="tools-grid">
				<view class="tool-item" @click="toNo">
					<wd-img :width="22" :height="22" src="/static/img/list5.png" />
					<text class="tool-name" style="margin-top: 16rpx;">订单</text>
				</view>
				<view class="tool-item" @click="toNo">
					<wd-img :width="22" :height="25" src="/static/img/list6.png" />
					<text class="tool-name">购物袋</text>
				</view>
			</view>
		</view>
		<view class="tools-section">
			<view class="section-title">我的服务</view>
			<view class="tools-grid">
				<view class="tool-item" @click="toNo">
					<wd-img :width="22" :height="25" src="/static/img/list7.png" />
					<text class="tool-name">销售客服</text>
				</view>
			</view>
		</view>
		<!-- <view class="tools-section">
			<view class="section-title">关于我们</view>
			<view class="tools-grid">
				<view class="tool-item">
					<wd-img :width="24" :height="24" src="/static/img/list8.png" />
					<text class="tool-name">系统设置</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import {useUserStore,} from '@/store/user';
	import { storeToRefs } from 'pinia'
	import avatar from '@/static/imgnull.png';
	const userStore = useUserStore();
	const { userInfo,isLogin } = storeToRefs(userStore);
	const myInfo = ref({})
	const enterpriseList = ref([]);
	// 敬请期待
	const toNo = ()=>{
		uni.showToast({
			title: '敬请期待',
			icon: 'none'
		})
	}
	// 去登录
	const toLogin = ()=>{
		uni.navigateTo({
			url:'/pagesA/view/login/index'
		})
	}
	// 去个人资料
	const toProfile = ()=>{
		uni.navigateTo({
			url:'/pagesA/view/Profile/index'
		})
	}
	// 会员中心
	const toOpenVip = ()=>{
		uni.navigateTo({
			url:'/pagesA/view/openVip/index'
		})
	}
	// 会员开通
	const toVip = ()=>{
		uni.switchTab({
			url:'/pages/vip/index'
		})
	}
	// 课程购买
	const toCourse = ()=>{
		uni.navigateTo({
			url:'/pagesA/view/course/index'
		})
	}
	// 积分
	const toTntegral = ()=>{
		uni.navigateTo({
			url:'/pagesA/view/integral/index'
		})	
	}
	// 跳转到水吧页面

	const handleFunction = () => {
		if(enterpriseList.value.length>0){
			uni.navigateTo({
				url: '/pagesA/view/waterBar/index?venueId='+enterpriseList.value[0].id
			});
		}else{
			uni.showToast({
				title: '未查询到水吧',
				icon: 'none'
			})
		}
		
	};
		// 附近门店
	const getHomeVenue =  () => {
		uni.api.getMiniHomeVenue({
		}).then(res => {
			if (res.code == 0) {
			enterpriseList.value = res.data || [];
			}
		});
	};
	onShow(() => {
		if(isLogin.value){
			getHomeVenue();
		}
		uni.api.vip().then(res => {
			if(res.code==0){
				myInfo.value = res.data || {};
			}
		});
	})
	
</script>

<style lang="scss">
	.mine-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 1rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		background-color: #797979;
		padding: 40rpx 20px;
		text-align: center;
		margin-bottom: 20rpx;
		height: 500rpx;
		position: relative;
		.bg{
			position: absolute;	
			top: 0;
			left: 0;
		}
	}

	.user-card {
		position: relative;
		width: 710rpx;
		height: 250rpx;
		margin-left: 20rpx;
		margin-top: -180rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		z-index: 99;
		.bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		.card {
			position: relative;
			z-index: 98;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;

			text {
				font-weight: 400;
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #fff;
			}
		}
	}

	.avatar {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
		border: 4rpx solid #fff;
		z-index: 88;
	}

	.user-name {
		font-size: 33rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		padding-left: 6px;
		font-weight: 500;
		font-size: 33rpx;
		color: #FFFFFF;
	}

	.vip-btn {
		background-color: #111827;
		color: white;
		font-size: 24rpx;
		width: 250rpx;
		height: 50rpx;
		border-radius: 24rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.member-banner {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
	}

	.banner-text {
		font-size: 30rpx;
		font-weight: bold;
	}

	.banner-subtext {
		position: absolute;
		top: 90rpx;
		left: 30rpx;
		font-size: 24rpx;
		color: #999;
	}

	.banner-subtext2 {
		position: absolute;
		top: 50rpx;
		right: 30rpx;
		font-size: 24rpx;
		color: #111827;
		background: #fff;
		width: 150rpx;
		height: 60rpx;
		border-radius: 24rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;

	}

	.stats-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.tools-section {
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
		line-height: 54rpx;
		height: 68rpx;
		border-bottom: 1px solid #e5e5e5;
	}

	.tools-grid {
		display: flex;
	}

	.tool-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		width: 28%;
		padding-bottom: 10rpx;
	}

	.tool-name {
		font-size: 24rpx;
		color: #000000;
		margin-top: 10rpx;
	}
</style>